<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{
				margin: 0;padding: 0;list-style: none;
			}
			.box{
				width: 790px;
				margin: 0 auto;
				position: relative;
			}
			.box img{
				width: 100%;
				height: 100%;
			}
			.lb li{
				position: absolute;
			}
			.left,.right{
				position: absolute;
				top: 140px;
				width: 30px;
				height: 60px;
				background: black;
				opacity: 0.5;
				line-height: 60px;
				text-align: center;
				display: none;
			}
			.box:hover .left,.box:hover .right{
				display: block;
			}
			.right{
				right: 0;
			}
			.box .footer{
				position: absolute;
				width: 180px;
				height: 20px;
				border-radius: 10px;
				background: white;
				background:rgba(250,250,250,0.5) ;
				top: 310px;
				left: 275px;
			}
			.footer li{
				width: 12px;
				height: 12px;
				background: white;
				border-radius: 50%;
				float: left;
				margin-left: 10px;
			    /*position: absolute;*/
				margin-top:3.5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="lb">
				<li><img src="//img20.360buyimg.com/da/jfs/t13660/11/2291193231/97115/a65e3b2/5a3a926aN4c4f2310.jpg"/></li>
				<li><img src="//img1.360buyimg.com/da/jfs/t12298/290/2219103450/97241/bb1a374b/5a376188Nda283c27.jpg"/></li>
				<li><img src="//img1.360buyimg.com/da/jfs/t15523/25/735917138/124317/a8f0bdcc/5a3b4ce1Neb5a6176.jpg"/></li>
				<li><img src="//img12.360buyimg.com/babel/jfs/t12289/59/2404056524/136359/95a47ceb/5a3cbe83Neb579b0e.jpg"/></li>
				<li><img src="//img1.360buyimg.com/da/jfs/t12352/41/2349526840/87437/cc8986d8/5a3b5792N6fa5c6b2.jpg"/></li>
				<li><img src="//img14.360buyimg.com/babel/jfs/t14992/232/884504725/109908/b1a20371/5a3c7a96N33d93beb.jpg"/></li>
				<li><img src="//img10.360buyimg.com/babel/jfs/t16495/298/728541812/189212/ccf30bfd/5a3c6ba2N6b303cbe.jpg"/></li>
				<li><img src="//img11.360buyimg.com/babel/jfs/t16012/230/767759625/91872/8d980e10/5a3c82f2N40ffa18f.jpg"/></li>
			</ul>
			<div class="left"><span class="glyphicon glyphicon-chevron-left"></span></div>
			<div class="right"><span class="glyphicon glyphicon-chevron-right"></span></div>
			<ol class="footer">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		
		<script type="text/javascript">
			$(function(){
				var index=0;
				function fun(){
					
					//下标加1
					index++;
					//判断临界点
					if(index>=8){
						index =0;
					}
					//图片切换
					$("ul>li").eq(index).fadeIn(1000);
					$("ul>li").eq(index).siblings().fadeOut(1000);
					//小圆点颜色在变化
					$("ol>li").eq(index).css("background","red");
					$("ol>li").eq(index).siblings().css("background","white");
				}
				var timer =setInterval(fun,2000);
					
				$(".left").click(function(){
					$("ul>li").eq(index--).fadeIn(1000);
					$("ul>li").eq(index--).siblings().fadeOut(1000);


				})
				$(".right").click(function(){
					$("ul>li").eq(index).fadeIn(1000);
					$("ul>li").eq(index).siblings().fadeOut(1000);
				})


				
			})
			
		</script>
	</body>
</html>
